<template>
	<div class="test-template">
		<p class="template-title">模板中心</p>
		<ul>
			<li @click="use_template(item.ID)" v-for="(item,index) in templates" :key="index"><img :src="item.TemplateImgurl"></li>
		</ul>
	</div>
</template>

<script>
	export default ({
		name: 'TestTemplate',
		data() {
			return {
				templates: [],
				temData: {
					bg_image: "/static/images/bg/sky.png",
					data: [{
							id: "",
							title: "文字",
							name: "Text",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isShow: false,
							isProview: false,
							props: {
								text: "再美丽的鸟，如果不翱翔蓝天也不会快乐"
							},
							css: {
								base: {
									t: 420, 
									l: 0, 
									w: 285,
									h: 40, 
									br: 2,
									rotate: 0
								},
								bd: {
									w: 0, 
									t: 2, 
									c: "none", 
									r: 0
								},
								ft: {
									s: 2, 
									t: 7, 
									c: "#fff", 
									y: 1, 
									b: 1 
								},
								lh: 40, 
								z: 1,
								bg: {
									c: "#333"
								},
								opa: {
									o: 6
								},
								bsd: {
									x: 0,
									y: 0,
									s: 0,
									p: 0,
									c: "#333"
								}
							}
						},
						{
							id: "",
							title: "图片",
							name: "Image",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isProview: false,
							props: {
								src: "/static/images/bg/bubble.png",
								animate: "fadeInUpBig",
								animateDuration: 0,
								animateDelay: 0
							},
							css: {
								base: {
									t: 152,
									l: 142,
									w: 60,
									h: 60,
									br: 5,
									rotate: 0
								},
								bd: {
									w: 1,
									t: 1,
									c: "#fff"
								},
								z: 2,
								bg: {
									c: ""
								}
							}
						},
						{
							id: "",
							title: "图片",
							name: "Image",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isProview: false,
							props: {
								src: "/static/images/bg/bubble.png",
								animate: "fadeInUpBig",
								animateDuration: 0,
								animateDelay: 0
							},
							css: {
								base: {
									t: 120,
									l: 34,
									w: 52,
									h: 52,
									br: 5,
									rotate: 0
								},
								bd: {
									w: 1,
									t: 1,
									c: "#fff"
								},
								z: 2,
								bg: {
									c: ""
								}
							}
						},
						{
							id: "",
							title: "图片",
							name: "Image",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isProview: false,
							props: {
								src: "/static/images/bg/bubble.png",
								animate: "fadeInUpBig",
								animateDuration: 0,
								animateDelay: 0
							},
							css: {
								base: {
									t: 238,
									l: 209,
									w: 61,
									h: 61,
									br: 5,
									rotate: 0
								},
								bd: {
									w: 1,
									t: 1,
									c: "#fff"
								},
								z: 2,
								bg: {
									c: ""
								}
							}
						},
						{
							id: "",
							title: "图片",
							name: "Image",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isProview: false,
							props: {
								src: "/static/images/bg/bubble.png",
								animate: "fadeInUpBig",
								animateDuration: 0,
								animateDelay: 0
							},
							css: {
								base: {
									t: 317,
									l: 127,
									w: 70,
									h: 70,
									br: 5,
									rotate: 0
								},
								bd: {
									w: 1,
									t: 1,
									c: "#fff"
								},
								z: 2,
								bg: {
									c: ""
								}
							}
						},
						{
							id: "",
							title: "图片",
							name: "Image",
							type: 1,
							anim: {
								type: 1,
								duration: 1,
								delay: 0.4
							},
							isProview: false,
							props: {
								src: "static/images/bg/bubble.png",
								animate: "fadeInUpBig",
								animateDuration: 0,
								animateDelay: 0
							},
							css: {
								base: {
									t: 267,
									l: 22,
									w: 62,
									h: 62,
									br: 5,
									rotate: 0
								},
								bd: {
									w: 1,
									t: 1,
									c: "#fff"
								},
								z: 2,
								bg: {
									c: ""
								}
							}
						}
					]
				},
			}
		},
		created() {
			// 获取模板集合
			this.$request.get_templates({
				data: {},
				success: (result) => {
					this.templates = result.data
				}
			})
		},
		methods: {
			use_template(id) {
				const _self = this
				// 添加单页模板数据
				this.$confirm('确定要使用该模板替换掉当前内容吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true,
					showClose: false
				}).then(() => {
					_self.get_template_data(id)
				}).catch((err) => {
					console.log(err)
					this.$message({
						type: 'info',
						message: '已取消模板使用'
					});
				});

				// 				// 添加多页模板数据
				// 				for (var i = 0; i < this.temPages.length; i++) {
				// 					var content = this.temPages[i]
				// 					this.$store.commit('ADD_PAGE')
				// 					for (var j = 0; j < content.temContent.length; j++) {
				// 						var id = this.createRndomId() + i + j
				// 						const compData = Object.assign(content.temContent[j], {
				// 							parentId: this.$store.getters.newTemPageId,
				// 							id: id
				// 						});
				// 						this.$store.dispatch('testTemPages', compData);
				// 					}
				// 				}
			},
			get_template_data(id) {
				this.$request.get_template_data({
					data: {
						templateId: id
					},
					success: (result) => {
						// console.log(JSON.stringify(this.temData))
						if (result.success && result.data.TemplateData) {
							const temp_data = JSON.parse(result.data.TemplateData)
							var tempData = []
							var index=0
							for (let item of temp_data.data) {
								item.id=this.createRndomId()+index
								tempData.push(item)
								index++
							}
							this.$store.dispatch('testTemplate', tempData)
							// 替换背景图
							if (temp_data.bg_image) {
								this.$store.dispatch('setPageBackImg', temp_data.bg_image)
							}
						}
					}
				})
			},
			createRndomId: function(radix = 10) {
				return Date.now().toString(radix);
			}
		}
	})
</script>

<style lang="scss">
	.test-template {
		border: 1px solid #dbdee6;
		border-top: none;
		height: 100%;
		width: 280px;
		// overflow: scroll;
		background-color: #eff1f6;

		.template-title {
			height: 50px;
			line-height: 50px;
			color: #303133;
			font-size: 14px;
			text-align: center;
		}

		ul {
			margin-left: 5px;
		}

		li {
			float: left;
			list-style: none;
			width: 120px;
			height: 180px;
			margin-left: 10px;
			margin-bottom: 10px;

		}

		img {
			width: 100%;
			height: 100%;
		}

	}
</style>
